<script setup lang="ts">
import { ref } from 'vue';

import { List, ListItem, ListItemMeta } from 'ant-design-vue';

import { useMessage } from '#/hooks/web/useMessage';

import SecureEmail from './secure-email.vue';
import SecureMobile from './secure-mobile.vue';
import SecurePwd from './secure-pwd.vue';

const { createMessage } = useMessage();

const securePwdRef = ref();
const secureMobileRef = ref();
const secureEmailRef = ref();

function handleExtra(key: string) {
  switch (key) {
    case '1': {
      securePwdRef.value.open();

      break;
    }
    case '2': {
      secureMobileRef.value.open();

      break;
    }
    case '3': {
      secureEmailRef.value.open();

      break;
    }
    default: {
      createMessage.warn('敬请期待~');
    }
  }
}
</script>
<template>
  <List>
    <ListItem>
      <ListItemMeta>
        <template #title>
          密码
          <div class="extra" @click="handleExtra('1')">修改</div>
        </template>
        <template #description>
          <div>登录系统时需要的密码</div>
          <SecurePwd ref="securePwdRef" />
        </template>
      </ListItemMeta>
    </ListItem>
    <ListItem>
      <ListItemMeta>
        <template #title>
          手机号
          <div class="extra" @click="handleExtra('2')">修改</div>
        </template>
        <template #description>
          <div>登录系统的手机号</div>
          <SecureMobile ref="secureMobileRef" />
        </template>
      </ListItemMeta>
    </ListItem>
    <ListItem>
      <ListItemMeta>
        <template #title>
          邮箱
          <div class="extra" @click="handleExtra('3')">修改</div>
        </template>
        <template #description>
          <div>登录系统的邮箱</div>
          <SecureEmail ref="secureEmailRef" />
        </template>
      </ListItemMeta>
    </ListItem>
  </List>
</template>
<style lang="less" scoped>
.extra {
  float: right;
  margin-top: 10px;
  margin-right: 30px;
  font-weight: normal;
  color: #1890ff;
  cursor: pointer;
}
</style>
